<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData">
      <el-form-item label="IC卡号">
        <el-input
          v-model="formData.cardNo"
          size="small"
          placeholder="IC卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="绑定手机号">
        <el-input
          v-model="formData.mobile"
          size="small"
          placeholder="绑定手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="卡余额">
        <template style="width:auto">
          <div class="remain">
            <el-input
              v-model="formData.minPrice"
              size="small"
              placeholder="最小"
              @blur="searchChange"
            ></el-input>
            <span style="display: inline-block; padding: 0px 8px">至</span>
            <el-input
              v-model="formData.maxPrice"
              size="small"
              placeholder="最大"
              @blur="searchChange"
            ></el-input>
          </div>
        </template>
      </el-form-item>
      <el-form-item label="卡状态">
        <el-select
          size="small"
          v-model="formData.enableFlag"
          @change="searchChange"
        >
          <el-option
            v-for="(item, index) in cardStatusList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="卡启用日期">
        <el-date-picker
          v-model="formData.createDate"
          @blur="searchChange"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" size="small" @click.stop="searchChange">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list-card">
      <div class="left">
        <div class="left-list">IC卡金额: {{totalMoney}}</div>
        <div class="left-list">IC卡数量: {{cardCount}}</div>
        <div class="left-list">IC卡启用数量: {{enableCardCount}}</div>
        <div class="left-list">IC卡注销数量: {{cancelCardCount}}</div>
      </div>
      <!-- <div class="bindcard">
        强制添加持卡人
        <el-switch
          v-model="ICcardtype"
          active-color="#13ce66"
          inactive-color="gray"
          @change="switchCard"
          style="margin-left:10px;">
        </el-switch>
      </div> -->
    </div>
    <avue-crud
      ref="crud"
      :page="page"
      :data="dataList"
      :option="tableOption"
      @current-change="currentChange"
      @size-change="sizeChange">
      <template slot-scope="scope" slot="cardInfo">
        <div class="cell">
          <div>姓名: <span>{{scope.row.name}}</span></div>
          <div>手机号: <span>{{scope.row.mobile}}</span></div>
          <div>所在小区: <span>{{scope.row.districtName}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="primary"
          size="small"
          v-if="scope.row.enableFlag==-1?false:true"
          @click.stop="deleteHandle(scope.row.id)"
          >注销</el-button
        >
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { tableOption1 } from "@/crud/app-user/user";
export default {
  data() {
    return {
      ICcardtype: false,
      formData: {
        cardNo: "",
        createDate: "",
        mobile: "",
        enableEndTime: "",
        enableFlag: "",
        enableStartTime: "",
        maxPrice: "",
        merchantId: "",
        minPrice: "",
      },
      tableOption: tableOption1,
      dataList: [],
      cardStatusList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "未启用",
          value: "0",
        },
        {
          label: "启用",
          value: "1",
        },
        {
          label: "注销",
          value: "-1",
        },
      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      totalMoney:'0',
      enableCardCount:'0',
      cardCount:'0',
      cancelCardCount:'0'
    };
  },
  mounted() {
    this.getDataList();
    this.getcardtype()
  },
  methods: {
    // 获取数据列表
    getDataList(page, params) {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/v1/merchant/card/list"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize,
            },
            params
          )
        ),
      }).then(({ data }) => {
        this.dataList = data.data.cardIPage.records;
        this.page.total = data.data.cardIPage.total;
        this.cardCount = data.data.cardCount;
        this.totalMoney = data.data.totalMoney;
        this.enableCardCount = data.data.enableCardCount;
        this.cancelCardCount = data.data.cancelCardCount;
        this.dataListLoading = false;
      });
    },
    // 获取IC卡绑定状态
    getcardtype(){
      this.$http({
        url: this.$http.adornUrl("/v1/merchant/system/get/iccard/config"),
        method: "get",
      }).then(res => {
        this.ICcardtype = res.data.data
        console.log(this.ICcardtype, 'IC卡状态')
      })
    },
    // IC卡绑定开关
    switchCard(e){
      let text = `确认关闭强制添加持卡人操作?`
      if(e){
        text = `确认开启强制添加持卡人操作?`
      }
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$http({
          url: this.$http.adornUrl("/v1/merchant/system/set/iccard/switch"),
          method: "POST",
          data: this.$http.adornData({
            switchValue: e
          })
        }).then(res => {
          console.log(res, '绑卡')
        })
      }).catch(()=>{
        this.ICcardtype = !e
      })
    },
    // 删除
    deleteHandle (id) {
      this.$confirm(`确定进行注销操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/card/cancel'),
          method: 'POST',
          data: this.$http.adornData({
              id:id
          })
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList(this.page)
            }
          })
        })
      })
      .catch(() => { })
    },
    searchChange() {
      if (this.formData.createDate && this.formData.createDate.length > 0) {
        this.formData.enableStartTime = this.formData.createDate[0];
        this.formData.enableEndTime = this.formData.createDate[1];
      } else {
        this.formData.enableStartTime = "";
        this.formData.enableEndTime = "";
      }
      this.page.currentPage = 1;
      this.getDataList(this.page, this.formData);
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getDataList(this.page, this.formData);
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page, this.formData);
    },
  },
};
</script>

<style lang="scss" scoped>
.remain {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 100px;
  }
}
.sumary-list-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  .left {
    display: flex;
    .left-list {
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border: solid 1px #009ff1;
      border-radius: 15px;
      margin-right: 10px;
    }
    .left-list:hover {
      color: white;
      background-color: #009ff1;
    }
  }
  .bindcard {
    display: flex;
    align-items: center;
    padding-right: 10px;
  }
}
</style>

